﻿@using Volo.Abp.Users
@inject ICurrentUser CurrentUser
@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
	Layout = null;
}

<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" lay-filter="query-form">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">废料单编号</label>
						<div class="layui-input-inline">
							<input type="text" name="wasteOrderCode" placeholder="请输入废料单编号" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">废料单名称</label>
						<div class="layui-input-inline">
							<input type="text" name="wasteOrderName" placeholder="请输入废料单名称" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<button type="button" class="layui-btn" lay-submit lay-filter="search-btn">搜索</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>

			<table id="data-table" lay-filter="data-table"></table>
		</div>
	</div>
</div>

<script type="text/html" id="toolbar">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
	</div>
</script>

<script type="text/html" id="col-ops">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="work-order-selector-tpl">
    <div class="layui-card" style="margin: 10px;">
        <div class="layui-card-body">
            <table id="work-order-table" lay-filter="work-order-table"></table>
        </div>
    </div>
</script>

<script type="text/html" id="form-tpl">
	<form class="layui-form" lay-filter="data-form" style="padding: 20px;">
		<input type="hidden" name="id" />
		<div class="layui-form-item">
			<label class="layui-form-label">废料单编号</label>
			<div class="layui-input-block">
				<div class="layui-input-inline" style="width: 280px;">
					<input type="text" name="wasteOrderCode" lay-verify="required" placeholder="自动生成" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">
					<input type="checkbox" name="autoGenerate" lay-skin="switch" lay-text="自动|手动" lay-filter="autoGenerateCode" checked>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">废料单名称</label>
			<div class="layui-input-block">
				<input type="text" name="wasteOrderName" lay-verify="required" placeholder="请输入废料单名称" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">生产工单</label>
			<div class="layui-input-block">
				<div class="layui-input-group">
					<input type="text" name="productionWorkOrder" lay-verify="required" placeholder="请点击右侧按钮选择生产工单" autocomplete="off" class="layui-input">
					<div class="layui-input-group-append">
						<button type="button" class="layui-btn" id="select-work-order-btn"><i class="layui-icon layui-icon-search"></i></button>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">废料日期</label>
			<div class="layui-input-block">
				<input type="text" name="wasteDate" id="wasteDate" lay-verify="required" placeholder="请选择废料日期" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">单据状态</label>
			<div class="layui-input-block">
				 <select name="orderStatus" lay-verify="required">
					<option value=""></option>
					<option value="草稿">草稿</option>
					<option value="已完成">已完成</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">仓库名称</label>
			<div class="layui-input-block">
				<input type="text" name="warehouseName" lay-verify="required" placeholder="请输入仓库名称" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">创建人</label>
			<div class="layui-input-block">
				<input type="text" name="creator" placeholder="系统自动获取" autocomplete="off" class="layui-input" disabled>
			</div>
		</div>
		<div class="layui-form-item" style="text-align: right;">
			<button class="layui-btn" lay-submit lay-filter="form-submit">保存</button>
			<button type="button" class="layui-btn layui-btn-primary" id="btn-cancel">取消</button>
		</div>
	</form>
</script>

<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.all.js"></script>
<script>
	/**
	 * a description 生成一个唯一且格式化的废料单编号，格式为 "FL" + 年月日时分秒
	 * a returns {string} 格式化的废料单编号
	 */
	function generateWasteOrderCode() {
		var date = new Date();
		var year = date.getFullYear();
		var month = ('0' + (date.getMonth() + 1)).slice(-2);
		var day = ('0' + date.getDate()).slice(-2);
		var hours = ('0' + date.getHours()).slice(-2);
		var minutes = ('0' + date.getMinutes()).slice(-2);
		var seconds = ('0' + date.getSeconds()).slice(-2);
		return 'FL' + year + month + day + hours + minutes + seconds;
	}

	// 使用 Layui 的模块
	layui.use(['table', 'form', 'layer', 'laydate'], function () {
		// 从 layui 中获取常用模块
		var table = layui.table;  // 表格模块
		var form = layui.form;    // 表单模块
		var layer = layui.layer;  // 弹层模块
		var $ = layui.jquery;     // jQuery
		var laydate = layui.laydate; // 日期时间选择模块

		// 初始化主数据表格
		var tableIns = table.render({
			elem: '#data-table', // 绑定到ID为 'data-table' 的 table 元素
			url: '/ProductionWasteOrder/GetList', // 数据接口
			page: true, // 开启分页
			toolbar: '#toolbar', // 开启表格头部工具栏，模板ID为 'toolbar'
			cols: [[ // 表格列定义
				{ type: 'checkbox', fixed: 'left' },
				{ field: 'id', title: 'ID', width: 80, sort: true },
				{ field: 'wasteOrderCode', title: '废料单编号', width: 150 },
				{ field: 'wasteOrderName', title: '废料单名称', width: 150 },
				{ field: 'productionWorkOrder', title: '生产工单编码', width: 150 },
				{ field: 'wasteDate', title: '废料日期', width: 120, templet: "<div>{{ layui.util.toDateString(d.wasteDate, 'yyyy-MM-dd') }}</div>" }, // 使用模板格式化日期
				{ field: 'orderStatus', title: '单据状态', width: 100 },
				{ field: 'warehouseName', title: '仓库名称', width: 120 },
				{ field: 'creator', title: '创建人', width: 120 },
				{ field: 'createTime', title: '创建时间', width: 180, templet: "<div>{{ layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss') }}</div>" }, // 使用模板格式化日期时间
				{ field: 'updateTime', title: '更新时间', width: 180, templet: "<div>{{ layui.util.toDateString(d.updateTime, 'yyyy-MM-dd HH:mm:ss') }}</div>" },
				{ fixed: 'right', title: '操作', toolbar: '#col-ops', width: 150 } // 定义右侧操作列，模板ID为 'col-ops'
			]]
		});

		// 监听搜索表单的提交事件
		form.on('submit(search-btn)', function (data) {
			// 使用 'table.reload' 方法重新加载表格数据
			tableIns.reload({
				where: data.field, // 设置新的查询参数
				page: {
					curr: 1 // 每次搜索后都从第 1 页开始显示
				}
			});
			return false; // 阻止表单的默认提交行为
		});

		// 监听表格头部的工具栏事件 (如：新增按钮)
		table.on('toolbar(data-table)', function (obj) {
			if (obj.event === 'add') { // 判断事件源是否为 'add'
				openForm(); // 调用打开表单弹窗的函数
			}
		});

		// 监听表格中行内工具条的事件 (如：编辑、删除按钮)
		table.on('tool(data-table)', function (obj) {
			var data = obj.data; // 获取当前行的数据
			if (obj.event === 'edit') { // 判断事件源是否为 'edit'
				openForm(data); // 调用打开表单函数，并传入当前行数据用于编辑
			} else if (obj.event === 'del') { // 判断事件源是否为 'del'
				// 弹出确认删除的对话框
				layer.confirm('真的要删除该条记录吗？', function (index) {
					// 发起 AJAX 请求到后端执行删除操作
					$.ajax({
						url: '/ProductionWasteOrder/Delete',
						type: 'POST',
						data: { id: data.id },
						success: function (res) {
							if (res.success) {
								layer.msg('删除成功');
								tableIns.reload(); // 成功后重新加载表格
							} else {
								layer.msg('删除失败: ' + res.message);
							}
						},
						error: function () {
							layer.msg('操作失败，服务器出错了');
						}
					});
					layer.close(index); // 关闭确认对话框
				});
			}
		});

		/**
		 * a description 打开新增或编辑表单的弹窗
		 * a param {object} [data] - 编辑时传入的行数据，新增时为空
		 */
		function openForm(data) {
			var isEdit = !!data; // 通过检查 data 是否存在来判断是新增还是编辑模式
			var title = isEdit ? "编辑生产废料单" : "添加生产废料单";

			// 使用 layer.open 打开一个弹窗
			layer.open({
				type: 1, // 弹窗类型为页面层
				title: title, // 弹窗标题
				content: $('#form-tpl').html(), // 弹窗内容：从模板中获取 HTML
				area: ['600px', 'auto'], // 弹窗的宽高
				// 弹窗成功加载后执行的回调函数
				success: function (layero, index) {
					var formElem = layero.find('form'); // 获取弹窗内的表单元素
					var codeInput = layero.find('input[name="wasteOrderCode"]');
					var autoSwitch = layero.find('input[name="autoGenerate"]');

					// 如果是编辑模式，则需要用已有数据填充表单
					if (isEdit) {
						data.wasteDate = layui.util.toDateString(data.wasteDate, 'yyyy-MM-dd'); // 格式化日期
						form.val('data-form', data); // 使用 form.val 快速填充表单
						// 编辑时，废料单编号、自动生成开关和选择工单按钮都应被禁用
						codeInput.attr('disabled', true);
						autoSwitch.attr('disabled', true);
						layero.find('#select-work-order-btn').attr('disabled', true);
					} else {
						// 如果是新增模式，自动生成并填充编号
						codeInput.val(generateWasteOrderCode());
						codeInput.attr('disabled', true); // 默认禁用编号输入框
						
						// 从 localStorage 中取出当前登录的用户名并设置到"创建人"输入框
						var savedUsername = localStorage.getItem('erp_username');
						if (savedUsername) {
							layero.find('input[name="creator"]').val(savedUsername);
						}
					}

					// 为 "选择生产工单" 按钮绑定点击事件
					layero.find('#select-work-order-btn').on('click', function() {
						var selectedWorkOrder = null; // 用于存储在子窗口中选中的工单数据

						// 再次使用 layer.open 打开一个新的弹窗用于选择生产工单
						layer.open({
							type: 1,
							title: '选择生产工单',
							content: $('#work-order-selector-tpl').html(), // 加载工单选择器的模板
							area: ['800px', '500px'],
							btn: ['确定', '取消'],
							// 工单选择弹窗加载成功后的回调
							success: function (selectorLayero) {
								// 发起 Ajax 请求获取工单数据
								$.ajax({
									url: '/ProductionWasteOrder/QueryWorkOrder',
									type: 'GET',
									dataType: 'json',
									success: function(res) {
										var tableData = [];
										// 对返回的数据进行简单的容错处理
										if (Array.isArray(res)) {
											tableData = res;
										} else if (res && typeof res === 'object') {
											tableData = [res]; // 如果返回的是单个对象，也包装成数组
										} else {
											layer.msg('返回的工单数据格式不正确');
											return;
										}

										// 在工单选择弹窗中渲染一个新的数据表格
										table.render({
											elem: '#work-order-table',
											data: tableData,
											page: true,
											cols: [[
												{ field: 'workOrderCode', title: '工单编码', width: 200 },
												{ field: 'productName', title: '产品名称', width: 150 },
												{ field: 'workOrderQuantity', title: '数量', width: 100 },
												{ field: 'creationTime', title: '创建时间', width: 180, templet: "<div>{{ layui.util.toDateString(d.creationTime, 'yyyy-MM-dd HH:mm:ss') }}</div>" }
											]]
										});

										// 监听工单选择表格的行单击事件，以实现选中效果
										table.on('row(work-order-table)', function(obj){
											selectedWorkOrder = obj.data; // 将选中的行数据保存到变量中

											// 生成一个随机的、亮度较高的 HSL 颜色，用于高亮显示
											var randomColor = 'hsl(' + Math.floor(Math.random() * 360) + ', 80%, 88%)';

											// 移除其他行的背景色，并用随机色高亮当前点击的行
											obj.tr.css('background-color', randomColor).siblings().css('background-color', '');
										});
									},
									error: function() {
										layer.msg('请求工单数据失败，请检查后端接口');
									}
								});
							},
							// "确定" 按钮的回调函数
							yes: function (selectorIndex) {
								if (!selectedWorkOrder) {
									layer.msg('请选择一个工单');
									return false; // 阻止弹窗关闭
								}
								// 将选中的工单号填回主表单
								layero.find('input[name="productionWorkOrder"]').val(selectedWorkOrder.workOrderCode);
								layer.close(selectorIndex); // 关闭工单选择弹窗
							}
						});
					});

					// 初始化废料日期选择器
					laydate.render({
						elem: '#wasteDate'
					});

					// 重新渲染表单（非常重要，特别是当表单元素是动态生成时）
					form.render(null, 'data-form');

					// 监听 "自动生成编号" 的开关切换事件
					form.on('switch(autoGenerateCode)', function (switchData) {
						var isChecked = switchData.elem.checked; // 获取开关状态
						if (isChecked) {
							// 自动生成模式
							codeInput.val(generateWasteOrderCode());
							codeInput.attr('disabled', true);
							codeInput.attr('placeholder', '自动生成');
						} else {
							// 手动输入模式
							codeInput.val('');
							codeInput.removeAttr('disabled');
							codeInput.attr('placeholder', '请输入废料单编号');
							codeInput.focus();
						}
					});

					// 监听表单的最终提交事件（保存按钮）
					form.on('submit(form-submit)', function (formData) {
						// 根据是编辑还是新增，决定提交的 URL
						var url = isEdit ? '/ProductionWasteOrder/Update?id=' + data.id : '/ProductionWasteOrder/Create';
						if(!isEdit){
							formData.field.creator = savedUsername; // 确保新增时创建人信息被提交
						}
						// 发起 AJAX 请求，提交表单数据
						$.ajax({
							url: url,
							type: 'POST',
							contentType: 'application/json', // 告知服务器请求体是 JSON 格式
							data: JSON.stringify(formData.field), // 将表单数据序列化为 JSON 字符串
							success: function (res) {
								if (res.success) {
									layer.msg(isEdit ? '更新成功' : '添加成功');
									layer.close(index); // 关闭当前表单弹窗
									tableIns.reload(); // 刷新主表格数据
								} else {
									layer.msg((isEdit ? '更新' : '添加') + '失败: ' + res.message);
								}
							},
							error: function () {
								layer.msg('操作失败，服务器出错了');
							}
						});

						return false; // 阻止表单默认提交
					});

					// 为取消按钮绑定点击事件
					layero.find('#btn-cancel').on('click', function() {
						layer.close(index); // 直接关闭弹窗
					});
				}
			});
		}
	});
</script>
